<template>
  <el-container class="me-top">
    <el-header>
      <el-row>
        <el-col :span="18" style="text-align: left;">
          <el-form ref="form" :model="formInline" :inline="true">
            <el-form-item label="名称:">
              <el-input v-model="formInline.name" />
            </el-form-item>
            <el-button icon="el-icon-search" circle @click="search" />
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="add">添加配件</el-button>
          <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确认全部删除？"
            @onConfirm="BatchRemove"
          >
            <el-button slot="reference" :disabled="flag" type="danger">移除配件</el-button>
          </el-popconfirm>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table :data="tableData" border stripe style="width: 100%" :row-style="isRed"
                @selection-change="selectedRows">
        <el-table-column  type="selection" width="55" />
<!--        <el-table-column prop="id" label="编号" />-->
        <el-table-column prop="partsName" label="配件名称" />
        <el-table-column prop="price" label="配件金额" />
        <el-table-column prop="num" label="库存" />
        <el-table-column prop="createTime" label="创建时间" v-model="formInline.date"
                         type="date"
                         placeholder="选择日期"/>
        <el-table-column prop="context" label="备注" />
        <el-table-column prop="warnNum" label="库存警告数量"  />
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="你确定要删除当前数据？"
              @onConfirm="remove(scope.row)"
            >
              <el-button slot="reference" type="danger" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="pageSizes"
          :page-size="10"

          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- :current-page="2"-->
      </div>
    </el-main>
    <!--  新增、编辑-->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <el-form ref="addForm" :model="addForm" label-width="100px">
        <input v-model="addForm.id" type="hidden">
        <el-form-item prop="partsName" label="配件名称">
          <el-input v-model="addForm.partsName" />
        </el-form-item>
        <el-form-item prop="price" label="配件金额">
          <el-input v-model="addForm.price" />
        </el-form-item>
        <el-form-item prop="num" label="库存数量">
          <el-input v-model="addForm.num" />
        </el-form-item>
        <el-form-item prop="warnNum" label="库存警告数量">
          <el-input v-model="addForm.warnNum" />
        </el-form-item>
        <el-form-item prop="context" label="备注">
          <el-input v-model="addForm.context" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>

</template>

<script>
    export default {
        data() {
            return {
              flag: true,
                tableData:[],
                addForm: {
                    id: '',
                    partsName: '',
                    price:'',
                    num:'',
                    context:'',
                    warnNum:'',
                },
                page: 1, // 第几页
                size: 10, // 每页条数
                total: 0,
                pageSizes: [5, 10, 15, 20],
                tableData: [],
                formInline: {
                    name: '',
                    date: ''
                },
                dialogFormVisible: false,
                selectRows: {}
            }
        },
        mounted() {
            this.loadListData()
        },
        methods: {
            isRed(row){
                if(row.num < row.warnNum){
                    return{
                        backgroundColor:'red'
                    }
                }
            },
            search() {
                this.loadListData()
            },
            submit() {
                if (this.addForm.id) { // 修改
                    this.$http.put('/parts/update', this.addForm).then((res) => {
                        if (res.data.success) {
                            this.$message.success(res.data.message)
                            this.loadListData()
                            this.dialogFormVisible = false
                        } else {
                            this.$message.error('修改失败[' + error.message + ']')
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                } else { // 添加
                    this.$http.post('/parts/insert', this.addForm).then((res) => {
                        if (res.data.success) {
                            this.$message.success(res.data.message)
                            this.loadListData()
                            this.dialogFormVisible = false
                        } else {
                            // eslint-disable-next-line no-undef
                            this.$message.error('添加失败[' + error.message + ']')
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            add() {
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['addForm'].resetFields()
                })
            },
            edit(row) {
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    for (const key in row) {
                        this.addForm[key] = row[key]
                    }
                })
            },
            remove(row) {
                this.$http.delete('/parts/deleteById/' + row.id).then(res => {
                    if (res.data.success) {
                        this.$message.success(res.data.message)
                        this.loadListData()
                    } else {
                        // eslint-disable-next-line no-undef
                        this.$message.error('删除失败[' + error.message + ']')
                    }
                }).catch(error => {
                    this.$message.error('删除失败[' + error.message + ']')
                })
            },
            BatchRemove() {
                const ids = this.selectRows.map(function(obj, index, arr) {
                    return obj.id
                })
                console.log(ids.toString())
                this.$http.post('/parts/batchDeleteByIds', { ids: ids }).then(res => {
                    if (res.data.success) {
                        this.$message.success(res.data.message)
                        this.loadListData()
                    } else {
                        // eslint-disable-next-line no-undef
                        this.$message.error('删除失败[' + error.message + ']')
                    }
                }).catch(error => {
                    this.$message.error('删除失败[' + error.message + ']')
                })
            },
            handleSizeChange(val) {
                this.size = val
                this.loadListData()
            },
            handleCurrentChange(currentPage) {
                this.page = currentPage
                this.loadListData()
            },
            loadListData() {
                this.loading = true
                // vue加载完成，发送ajax请求动态获取数据
                const param = {
                    'pageNo': this.page,
                    'pageSize': this.size,
                    'keyWord': this.formInline.name
                    // 'date': this.formInline.date
                }
                this.$http.post('/parts/findForList', param).then((res) => {
                    this.tableData = res.data.data.result
                    this.total = res.data.data.total
                    this.page = res.data.data.pageNo
                }).catch(error => {
                    console.log(error)
                })
            },
            selectedRows(rows) {
                console.log(rows)
                if (rows.length > 0) {
                    this.flag = false
                    this.selectRows = rows
                } else {
                    this.flag = true
                }
            }
        }
    }
</script>

<style scoped>
  .me-top{
    padding-top: 20px;
  }
</style>
